@charset "UTF-8";
/* copy */
#football .page {
  background-image: none;
  background-color: #5fd0f6;
  overflow: initial; }
  #football .page .content {
    padding: 0;
    overflow: initial;
    position: relative; }

#football .banner {
  width: 96.71875%;
  position: relative; }

#football .main .container {
  padding: 10px 0;
  margin: 8px;
  background-color: #33bbf3;
  /*  &:nth-child(2n) {
        background-color: rgb(4, 145, 231);
      } */ }
  #football .main .container section {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box; }
    #football .main .container section.header {
      padding: 0 5%;
      position: relative; }
      #football .main .container section.header .logo {
        width: 21.875%;
        z-index: 2;
        position: relative; }
      #football .main .container section.header .ban {
        position: absolute;
        background: #ffe400;
        top: 50%;
        left: 21.5%;
        -webkit-transform: translateY(-50%);
           -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
             -o-transform: translateY(-50%);
                transform: translateY(-50%);
        line-height: 2.7;
        font-size: 12px;
        width: 70%;
        -webkit-border-radius: 30px;
           -moz-border-radius: 30px;
                border-radius: 30px;
        padding-left: 4%;
        font-weight: bold;
        color: #005292;
        overflow-x: hidden;
        -o-text-overflow: ellipsis;
           text-overflow: ellipsis;
        white-space: nowrap; }
        #football .main .container section.header .ban span {
          display: block;
          -webkit-border-radius: 50%;
             -moz-border-radius: 50%;
                  border-radius: 50%;
          width: 2.3em;
          height: 2.3em;
          line-height: 2.3em;
          text-align: center;
          display: inline-block;
          color: #ffe400;
          background: #005292;
          margin: 0 2px; }
      #football .main .container section.header .drinks {
        position: absolute;
        width: 14%;
        top: -75%;
        right: 2%; }
    #football .main .container section.vs {
      padding: 0 6.875%;
      margin-top: 12px;
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex; }
      #football .main .container section.vs:after, #football .main .container section.vs:before {
        content: "";
        display: block;
        visibility: hidden;
        height: 0;
        clear: both; }
      #football .main .container section.vs .left, #football .main .container section.vs .right {
        width: 39%;
        -webkit-border-radius: 20px;
           -moz-border-radius: 20px;
                border-radius: 20px;
        float: none;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        position: relative;
        border: none; }
        #football .main .container section.vs .left .cover, #football .main .container section.vs .left .win-cover, #football .main .container section.vs .right .cover, #football .main .container section.vs .right .win-cover {
          position: absolute;
          width: 110%;
          height: 110%;
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
          -webkit-border-radius: 20px;
             -moz-border-radius: 20px;
                  border-radius: 20px;
          background: rgba(0, 0, 0, 0.6);
          border: 2px solid #ffe400;
          top: 0;
          left: 0;
          -webkit-transform: translate(-5%, -5%);
             -moz-transform: translate(-5%, -5%);
              -ms-transform: translate(-5%, -5%);
               -o-transform: translate(-5%, -5%);
                  transform: translate(-5%, -5%);
          display: none; }
        #football .main .container section.vs .left .win-cover, #football .main .container section.vs .right .win-cover {
          background: rgba(225, 228, 0, 0.8) !important; }
          #football .main .container section.vs .left .win-cover .ratio, #football .main .container section.vs .right .win-cover .ratio {
            color: #004385;
            padding-top: 112.5%;
            font-weight: bold; }
          #football .main .container section.vs .left .win-cover img, #football .main .container section.vs .right .win-cover img {
            width: 60%;
            top: 22%;
            left: 20%; }
        #football .main .container section.vs .left.chosed .cover, #football .main .container section.vs .right.chosed .cover {
          display: block; }
        #football .main .container section.vs .left.won .win-cover, #football .main .container section.vs .right.won .win-cover {
          display: block; }
        #football .main .container section.vs .left img, #football .main .container section.vs .right img {
          width: 108%;
          position: absolute;
          left: -4%;
          bottom: 14%; }
        #football .main .container section.vs .left .pic, #football .main .container section.vs .right .pic {
          width: 104%;
          position: relative;
          left: -2%;
          top: -2px;
          height: 100%;
          -webkit-background-size: 100% 100%;
             -moz-background-size: 100%;
               -o-background-size: 100%;
                  background-size: 100%;
          background-repeat: no-repeat;
          -webkit-border-radius: 20px;
             -moz-border-radius: 20px;
                  border-radius: 20px;
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
          border: none; }
          #football .main .container section.vs .left .pic:after, #football .main .container section.vs .right .pic:after {
            content: " ";
            display: block;
            height: 0;
            padding-bottom: 92.1%; }
          #football .main .container section.vs .left .pic .label, #football .main .container section.vs .right .pic .label {
            position: absolute;
            font-size: 14px;
            width: 100%;
            line-height: 30px;
            text-align: center;
            left: 0;
            bottom: 8%;
            -webkit-transform: scale(1.05);
               -moz-transform: scale(1.05);
                -ms-transform: scale(1.05);
                 -o-transform: scale(1.05);
                    transform: scale(1.05);
            vertical-align: middle;
            overflow-x: hidden;
            -o-text-overflow: ellipsis;
               text-overflow: ellipsis;
            white-space: nowrap; }
            #football .main .container section.vs .left .pic .label:before, #football .main .container section.vs .right .pic .label:before {
              vertical-align: top;
              line-height: 30px;
              position: relative;
              left: -3%;
              margin-top: 3%; }
        #football .main .container section.vs .left .border, #football .main .container section.vs .right .border {
          position: absolute;
          width: 100%;
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
          top: 43%; }
        #football .main .container section.vs .left .ratio, #football .main .container section.vs .right .ratio {
          font-size: 14px;
          text-align: center;
          line-height: 1.5;
          padding-top: 117.5%; }
      #football .main .container section.vs .left {
        color: #004385; }
        #football .main .container section.vs .left .label {
          background-color: #005292;
          color: #ffe400; }
          #football .main .container section.vs .left .label:before {
            content: " ";
            display: inline-block;
            width: 1.5em;
            height: 1.5em;
            background: url("../images/football/team_logo_1.png") center no-repeat;
            -webkit-background-size: contain;
               -moz-background-size: contain;
                 -o-background-size: contain;
                    background-size: contain; }
        #football .main .container section.vs .left .border {
          background: url("../images/football/border1.png") no-repeat;
          -webkit-background-size: 100% 100%;
             -moz-background-size: 100%;
               -o-background-size: 100%;
                  background-size: 100%; }
          #football .main .container section.vs .left .border:after {
            content: " ";
            display: block;
            height: 0;
            padding-bottom: 51.6%; }
      #football .main .container section.vs .right {
        color: #ffe400; }
        #football .main .container section.vs .right .label {
          background-color: #ffe400;
          color: #005292; }
          #football .main .container section.vs .right .label:before {
            content: " ";
            display: inline-block;
            width: 1.5em;
            height: 1.5em;
            background: url("../images/football/team_logo_2.png") center no-repeat;
            -webkit-background-size: contain;
               -moz-background-size: contain;
                 -o-background-size: contain;
                    background-size: contain; }
        #football .main .container section.vs .right .border {
          background: url("../images/football/border2.png") no-repeat;
          -webkit-background-size: 100% 100%;
             -moz-background-size: 100%;
               -o-background-size: 100%;
                  background-size: 100%; }
          #football .main .container section.vs .right .border:after {
            content: " ";
            display: block;
            height: 0;
            padding-bottom: 51.6%; }
      #football .main .container section.vs .center {
        width: 22%;
        float: none;
        text-align: center;
        padding: 0;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box; }
        #football .main .container section.vs .center img {
          width: 100%;
          margin-top: 60%; }
    #football .main .container section.countdown {
      margin-top: 15px;
      padding: 0 7.8%; }
    #football .main .container section.countdown div {
      color: #004385;
      text-align: center;
      background: white;
      line-height: 28px; }
      #football .main .container section.countdown div:before {
        content: " ";
        display: inline-block;
        width: 1em;
        height: 1em;
        background: url("../images/index/count_icon.png") center no-repeat;
        -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
                background-size: cover;
        vertical-align: middle;
        position: relative;
        top: -1px; }
    #football .main .container section.bet {
      margin: 20px auto;
      padding: 0 7.8%;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
         -moz-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
      -webkit-align-items: center;
         -moz-box-align: center;
          -ms-flex-align: center;
              align-items: center; }
      #football .main .container section.bet img {
        width: 25%; }
    #football .main .container section .vs-change {
      padding: 0 7.8%;
      margin-top: 20px;
      margin-bottom: 15px; }
      #football .main .container section .vs-change .supp {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
           -moz-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center; }
        #football .main .container section .vs-change .supp .bar {
          width: 74.34%;
          background-image: url("../images/index/supp_bar.png");
          -webkit-background-size: 100% 100%;
             -moz-background-size: 100%;
               -o-background-size: 100%;
                  background-size: 100%;
          background-position: center;
          background-repeat: no-repeat;
          position: relative; }
          #football .main .container section .vs-change .supp .bar.disabled {
            background-image: url("../images/index/supp_bar_gray.png"); }
          #football .main .container section .vs-change .supp .bar:before {
            content: " ";
            display: block;
            height: 0;
            padding-bottom: 19.135533%; }
          #football .main .container section .vs-change .supp .bar input {
            position: absolute;
            display: block;
            width: 43%;
            text-align: center;
            top: 50%;
            left: 70%;
            -webkit-transform: translate(-50%, -55%);
               -moz-transform: translate(-50%, -55%);
                -ms-transform: translate(-50%, -55%);
                 -o-transform: translate(-50%, -55%);
                    transform: translate(-50%, -55%);
            border: none;
            background: transparent;
            line-height: 25px;
            font-size: 10px;
            -webkit-border-radius: 20px;
               -moz-border-radius: 20px;
                    border-radius: 20px;
            font-family: "Microsoft YaHei", "微软雅黑", "Helvetica", "Arial";
            color: #004385;
            vertical-align: middle; }
            #football .main .container section .vs-change .supp .bar input:focus {
              outline: none; }
        #football .main .container section .vs-change .supp .btn {
          width: 23.4%; }
          #football .main .container section .vs-change .supp .btn img {
            width: 100%;
            vertical-align: middle; }
      #football .main .container section .vs-change .result-bar {
        background-image: url("../images/index/result_bar.png");
        -webkit-background-size: 100% 100%;
           -moz-background-size: 100%;
             -o-background-size: 100%;
                background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        position: relative; }
        #football .main .container section .vs-change .result-bar:after {
          content: " ";
          display: block;
          height: 0;
          padding-bottom: 19.135533%; }
        #football .main .container section .vs-change .result-bar.disabled {
          background-image: url("../images/football/result_bar_gray.png"); }
        #football .main .container section .vs-change .result-bar span {
          position: absolute;
          width: 30%;
          display: block;
          line-height: 20px;
          right: 10px;
          font-size: 20px;
          color: #004385;
          /* color: #ffe617;
              text-shadow: 0 1px 0px #00c1c7; */
          top: 50%;
          -webkit-transform: translateY(-54%);
             -moz-transform: translateY(-54%);
              -ms-transform: translateY(-54%);
               -o-transform: translateY(-54%);
                  transform: translateY(-54%);
          text-align: center; }
      #football .main .container section .vs-change .left, #football .main .container section .vs-change .center, #football .main .container section .vs-change .right {
        background-repeat: no-repeat;
        -webkit-background-size: 100% 100%;
           -moz-background-size: 100%;
             -o-background-size: 100%;
                background-size: 100%;
        background-position: center; }
      #football .main .container section .vs-change .left, #football .main .container section .vs-change .right {
        width: 34.34%;
        position: relative; }
        #football .main .container section .vs-change .left:after, #football .main .container section .vs-change .right:after {
          content: " ";
          display: block;
          height: 0;
          padding-top: 69.78%; }
      #football .main .container section .vs-change .center {
        width: 25.66%; }
        #football .main .container section .vs-change .center:after {
          content: " ";
          display: block;
          height: 0;
          padding-top: 83.38%; }
      #football .main .container section .vs-change .left {
        background-image: url("../images/index/vs_change_left.png"); }
      #football .main .container section .vs-change .right {
        background-image: url("../images/index/vs_change_right.png"); }
      #football .main .container section .vs-change .center {
        background-image: url("../images/index/vs_change_center.png"); }

/* copy */
#index .football {
  position: relative;
  -webkit-transform: scale(1.06);
     -moz-transform: scale(1.06);
      -ms-transform: scale(1.06);
       -o-transform: scale(1.06);
          transform: scale(1.06);
  margin: 6% 0;
  background: url("../images/football/entry2.png") no-repeat;
  -webkit-background-size: 100% 100%;
     -moz-background-size: 100%;
       -o-background-size: 100%;
          background-size: 100%; }
  #index .football:after {
    content: " ";
    display: block;
    height: 0;
    padding-bottom: 124.87%; }
  #index .football button {
    position: absolute;
    left: 50%;
    bottom: 6%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
    background: transparent;
    border: none;
    text-indent: -9999999999999em;
    width: 18%;
    height: 10%; }
    #index .football button:active {
      outline: none;
      -webkit-outline: none; }

#football .dialog.exchange-fail .d-body {
  padding: 92.5% 0 0 0;
  background: url("../images/dialog-fail.png") no-repeat;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%; }

#football .dialog.exchange-fail .d-body:after {
  content: " ";
  display: none; }

#football .dialog.exchange-fail .d-body .message {
  left: 0;
  top: 25%;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #004385; }

#football .dialog.sub-success .d-body {
  background-image: url("../images/vs/success.png"); }

#football .dialog.sub-success .d-body:after {
  content: " ";
  display: block;
  width: 100%;
  padding-bottom: 102%; }

#football .dialog.sub-fail .d-body {
  padding: 92.5% 0 0 0;
  background: url("../images/dialog-fail.png") no-repeat;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%; }

#football .dialog.sub-fail .d-body:after {
  content: " ";
  display: none; }

#football .dialog.sub-fail .d-body .message {
  left: 0;
  top: 25%;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #004385; }
